<div class="dispatch-main-container">
  <div class="center-panel">
    <div class="bar">
      <div class="weather">
        <app-weather-panel></app-weather-panel>
      </div>

      <div class="data">
        <div class="water-panel">
          <div class="title">
            <span class="shuxian"></span>
            湖泊补水情况
          </div>
          <div class="data">
            <div class="item">
              <div class="num">19140</div>
              <div class="text">计划（万m³）</div>
            </div>
            <div class="item">
              <div class="num">{{drbsTotal.toFixed(0)}}</div>
              <div class="text">昨日补水量（万m³）</div>
            </div>
            <div class="item">
              <div class="num">{{ljbsTotal.toFixed(0)}}</div>
              <div class="text">累计补水量（万m³）</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="canvas-wrap">
      <div id="zx-canvas"></div>

      <div class="gate-info" *ngIf="infoShow"  [ngStyle]="{
                 'top': hoverItem.top,
                 'left': hoverItem.left
                 }">
        <div class="blue">警戒水位：{{hoverItem.alertLevel}}m</div>
        <div>当前水位：{{hoverItem.waterLevel}}m</div>
        <div class="blue">限定流量：{{hoverItem.limitTraffic}}m³/s</div>
        <div>当前引水流量：{{hoverItem.flow}}m³/s</div>
      </div>
    </div>

    <div class="legends">
      <button nz-button nzType="default" class="btn-type2" (click)="goPage('zx')">农业用水</button>
      <button nz-button nzType="default" class="btn-type2" (click)="goPage('gysh')">工业生活</button>
      <button nz-button nzType="default" class="btn-type1">生态用水</button>
    </div>
  </div>

  <div class="right-panel">
    <div class="table-wrap">
      <nz-table
        #rightTable
        nzBordered
        nzSize="small"
        [nzLoading]="rightTableLoading"
        [nzFrontPagination]="false"
        [nzPageSize]="8"
        [nzData]="rightTableData">
        <thead>
        <tr>
          <th>湖泊名称</th>
          <th>当日补水</th>
          <th>累计补水</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of rightTable.data" (click)="selectedRow(data)" [ngClass]="{'active': data.rrId == selecteRow.rrId}">
          <td>{{ data.rrName }}</td>
          <td>{{ data.val }}</td>
          <td>{{ data.valTotal }}</td>
        </tr>
        </tbody>
      </nz-table>
    </div>

    <div class="chart-wrap">
      <div class="chart-title">{{chartTitle}}</div>
      <div class="time-picker-wrap">
        时间：
        <nz-range-picker
          [nzAllowClear]="false"
          [(ngModel)]="rangePickerValue"
          (ngModelChange)="rangePickerValueChange($event)"
          style="width: 250px;"
        >
        </nz-range-picker>
      </div>
      <div echarts [options]="basicOpts" [merge]="customOpts" [loading]="rightTableLoading" class="chart"></div>
    </div>
  </div>
</div>
